<template>
  <div>
    <!-- 顶部标签 -->
    <div class="top">
      <van-row>
        <van-col span="8"
          ><van-icon class="tubiao" name="checked" />30天无忧退货</van-col
        >
        <van-col span="8"
          ><van-icon class="tubiao" name="checked" />48小时快速退费</van-col
        >
        <van-col span="8"
          ><van-icon class="tubiao" name="checked" />满88元免邮费</van-col
        >
      </van-row>
    </div>
    <!-- car -->
    <div class="car" v-for="(v, k) in cartList" :key="k">
      <!-- <van-checkbox-group v-model="v.checked">
        <van-checkbox
          @click="updateState(v.checked, v.product_id)"
          class="check"
          :name="v.product_id"
        ></van-checkbox>
      </van-checkbox-group> -->

      <van-checkbox
        v-model="v.checked"
        @click="updateState(v.checked, v.product_id)"
        :name="v.product_id"
      ></van-checkbox>

      <span>
        <van-swipe-cell class="produc">
          <van-card
            :num="v.number"
            :price="v.retail_price"
            :title="v.goods_name"
            :thumb="v.list_pic_url"
          />
          <van-stepper
            class="count"
            @change="change(v.goods_id, v.id, v.number, v.product_id)"
            v-model="v.number"
            v-show="step"
            min="1"
          />
          <template #right>
            <van-button
              square
              text="删除"
              type="danger"
              class="delete-button"
              @click="del(v.product_id)"
            />
          </template>
        </van-swipe-cell>
      </span>
    </div>
    <div class="submit">
      <van-submit-bar
        :price="total * 100"
        button-text="提交订单"
        @submit="onSubmit"
      >
        <van-checkbox v-model="checked" @click="checkAllState(checked)"
          >全选</van-checkbox
        >
        <template #tip>
          商品累计共{{ cartTotal.goodsCount }}件
          <van-button @click="stepp()" v-show="btn" class="btn" type="primary"
            >编辑</van-button
          >
          <van-button @click="finish()" v-show="fin" class="btn" type="primary"
            >完成编辑</van-button
          >
          可点击按钮数量进行修改
        </template>
      </van-submit-bar>
    </div>
    <!-- 底部导航 -->
    <apptabbar />
  </div>
</template>

<script>
import {
  GetCarData,
  GetDelData,
  GetStepperData,
  GetCheck,
} from "@/request/api";
import apptabbar from "@/components/AppTabbar";
export default {
  data() {
    return {
      checked: true,
      value: 1,
      result: ["a", "b"],
      cartList: "",
      total: 0,
      cartTotal: "",
      step: false, //步进器显示隐藏
      btn: true, //控制编辑按钮显示隐藏
      fin: false, //控制完成编辑按钮显示隐藏
    };
  },
  methods: {
    onSubmit() {},
    del(v) {
      console.log(v);
      let id = v.toString();
      console.log(id);
      GetDelData({ productIds: id }).then((res) => {
        // console.log(res);
        let { cartList } = res.data;
        // console.log(res.data);
        this.cartList = cartList;
        this.$router.go(0);
      });

      this.$toast.success("删除成功");
    },
    checkAllState(isChecked) {
      isChecked = isChecked === true ? 1 : 0;

      let productIds = "";

      this.cartList.forEach((item) => {
        productIds += item.product_id + ",";
      });

      GetCheck({
        isChecked,
        productIds,
      }).then((res) => {
        let { cartList } = res.data;
        this.cartList = cartList;
        this.total = res.data.cartTotal.checkedGoodsAmount;
      });
    },
    stepp() {
      this.btn = false;
      this.step = true;
      this.fin = true;
    },
    finish() {
      this.step = false;
      this.btn = true;
      this.fin = false;
    },
    // 步进器
    change(goodsId, id, number, productId) {
      GetStepperData({
        goodsId: goodsId,
        id: id,
        number: number,
        productId: productId,
      }).then((res) => {
        // console.log(res);
        this.total = res.data.cartTotal.checkedGoodsAmount;
        this.$toast.success("修改成功");
      });
    },
    updateState(checked, productIds) {
      let isChecked = checked === true ? 1 : 0;
      GetCheck({
        isChecked,
        productIds,
      }).then((res) => {
        this.checked = true;

        let { cartList } = res.data;
        this.cartList = cartList;
        this.cartList.forEach((item) => {
          if (item.checked === 0) {
            this.checked = false;
            return false;
          }
        });

        this.total = res.data.cartTotal.checkedGoodsAmount;
      });
    },
  },
  components: {
    apptabbar,
  },
  created() {
    GetCarData().then((res) => {
      let { cartList, cartTotal } = res.data;
      this.cartList = cartList;
      this.cartTotal = cartTotal;
      this.total = res.data.cartTotal.checkedGoodsAmount;

      this.cartList.forEach((item) => {
        if (item.checked === 0) {
          this.checked = false;
        }
      });

      // console.log(res);
      // console.log(res.data.cartList);
    });
  },
};
</script>

<style lang="less" scoped>
.top {
  font-size: 0.13rem;
  width: 100%;
  text-align: center;

  .tubiao {
    color: #8b0000;
  }
}
.car {
  margin-top: 0.2rem;
  width: 3.55rem;
  height: 1.25rem;
  text-align: center;
  display: flex;
  justify-content: space-around;
  border-bottom: 1px solid #ccc;
}
.produc {
  width: 3rem;
}
.check {
  -webkit-box-flex: 0;
  -webkit-flex: none;
  flex: none;
  height: 1.25rem;
  font-size: 20px;
  line-height: 1.25rem;
  cursor: pointer;
}
.delete-button {
  height: 100%;
}
.btn {
  width: 0.9rem;
  height: 0.4rem;
}
.count {
  margin-left: 1.2rem;
}
.van-submit-bar {
  margin-bottom: 0.5rem;
}
.van-submit-bar__tip {
  margin-top: 0.2rem;
}
</style>